<script setup lang="ts">
import { useMenus } from '@/composables/useMenus'
const { allMenus, getAllMenus, handleDelete } = useMenus()

import { useRouter } from 'vue-router'
const router = useRouter()

getAllMenus()
// //变量保存接口，存储返回的数据
// const allMenus = ref([] as MenuItem[])
// //获取数据的完整逻辑
// const getAllMenus = async () => {
//   const { data } = await getAll()
//   //获取数据失败getAll/getAllMenus
//   if (data.code === '000000') {
//     allMenus.value = data.data
//   } else {
//     ElMessage.error('获取菜单列表信息失败！')
//     throw new Error('获取菜单列表信息失败！')
//   }
// }
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="primary" @click="router.push('/menus/create')">添加菜单</el-button>
      </div>
    </template>
    <!-- 表格复制 -->
    <el-table :data="allMenus" border style="width: 100%">
      <el-table-column label="序号" width="100" type="index" align="center" />
      <el-table-column prop="name" label="菜单名称" align="center" />
      <el-table-column prop="level" label="菜单层级" width="180" />
      <el-table-column prop="icon" label="菜单图标" align="center" />
      <el-table-column prop="orderNum" label="排序" align="center" />
      <el-table-column label="操作" align="center" v-slot="scope">
        <el-button
          type="primary"
          @click="router.push({ name: 'menus-edit', params: { id: scope.row.id } })"
          >编辑</el-button
        >
        <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.box-card {
  //width: 400px;
  width: 100%;
}
</style>
